<template>
    <view class="bg-[#FCFCFE]">
        <!-- header -->
        <v-header />
        <!-- card -->
        <view class="max-w-[1297px] mx-auto">
            <view class="max-md:px-[5px]">
                <view class="h-[60px] flex items-center mt-[15px] max-md:px-[5px]">
                    <view class="font-bold text-3xl min-w-[40px]">{{ $t("transactions.title") }}</view>
                </view>
                <view class="max-md:hidden">
                    <up-divider :hairline="true" />
                </view>
                <view class="text-sm text-[#6C757d] max-md:hidden">
                    <text class="font-bold">Sponsored: Crudo Protocol</text>
                    <text>: Presale Stage 2 Live at $0.009, Listing soon at $0.20.</text>
                    <text class="text-[rgb(64,138,222)] font-bold cursor-pointer"> Join Presale Now!</text>
                </view>
                <view class="grid grid-cols-3 gap-[10px] max-md:grid-cols-1 mt-[20px] max-md:mt-0">
                    <uni-group mode="card">
                        <view class="flex flex-col justify-center items-start gap-[10px]">
                            <view class="text-[#6C7781] text-[12px]">{{ $t("transactions.card1.title") }}</view>
                            <view v-if="transactionsOverviewData.transactions !== ''" class="text-[18px]">
                                <text>{{ transactionsOverviewData.transactions }}</text>
                                <text
                                    class="text-[12px] ml-[10px]"
                                    :style="{ color: transactionsOverviewData.transactions_color }"
                                    >({{ transactionsOverviewData.transactions_percentage }}%)</text
                                >
                            </view>
                            <view v-else>
                                <up-loading-icon />
                            </view>
                        </view>
                    </uni-group>
                    <uni-group mode="card">
                        <view class="flex flex-col justify-center items-start gap-[10px]">
                            <view class="text-[#6C7781] text-[12px]">{{ $t("transactions.card3.title") }}</view>
                            <view v-if="transactionsOverviewData.gas !== ''" class="text-[18px]">
                                <text>{{ transactionsOverviewData.gas }}</text>
                                <text
                                    class="text-[12px] ml-[10px]"
                                    :style="{ color: transactionsOverviewData.gas_color }"
                                    >({{ transactionsOverviewData.gas_percentage }}%)</text
                                >
                            </view>
                            <view v-else>
                                <up-loading-icon />
                            </view>
                        </view>
                    </uni-group>
                    <uni-group mode="card">
                        <view class="flex flex-col justify-center items-start gap-[10px]">
                            <view class="text-[#6C7781] text-[12px]">{{ $t("transactions.card4.title") }}</view>
                            <view v-if="transactionsOverviewData.gas_avg !== ''" class="text-[18px]">
                                <text>{{ transactionsOverviewData.gas_avg }}</text>
                                <text
                                    class="text-[12px] ml-[10px]"
                                    :style="{ color: transactionsOverviewData.gas_avg_percentage_color }"
                                    >({{ transactionsOverviewData.gas_avg_percentage }}%)</text
                                >
                            </view>
                            <view v-else>
                                <up-loading-icon />
                            </view>
                        </view>
                    </uni-group>
                </view>
            </view>
            <view class="mt-[20px] min-h-[650px] max-md:px-[5px]">
                <uni-group mode="card">
                    <view class="flex flex-col justify-between gap-[3px]">
                        <view class="flex items-center gap-[5px] mt-[5px] text-[13px]">
                            <text>{{ $t("transactions.table.tips1") }}</text>
                            <text>{{ transactionsData.total }}</text>
                            <text>{{ $t("transactions.table.tips2") }}</text>
                        </view>
                        <view class="text-[12px] text-[#6C757d]">
                            <text>({{ $t("transactions.table.tips3") }})</text>
                        </view>
                    </view>
                    <view class="mt-[20px]">
                        <uni-table :border="false" stripe :emptyText="$t('address.table.noData')">
                            <uni-tr>
                                <uni-th align="center">{{ $t("transactions.table.col1") }}</uni-th>
                                <uni-th align="center">{{ $t("transactions.table.col2") }}</uni-th>
                                <uni-th align="center">{{ $t("transactions.table.col3") }}</uni-th>
                                <uni-th align="center">{{ $t("transactions.table.col4") }}</uni-th>
                                <uni-th align="center">{{ $t("transactions.table.col5") }}</uni-th>
                            </uni-tr>
                            <uni-tr v-for="v in transactionsData.list" :key="v.hash">
                                <uni-td align="center">
                                    <view
                                        class="text-[#4285F4] text-[14px] cursor-pointer"
                                        @click="onTransaction(v.txinfo.hash)"
                                    >
                                        {{ crop(v.txinfo.hash, 13) }}
                                    </view>
                                </uni-td>
                                <uni-td align="center">{{ v.timestamp }}</uni-td>
                                <uni-td align="center">
                                    <view
                                        class="text-[#4285F4] text-[14px] cursor-pointer"
                                        @click="onBlock(v.blockheight)"
                                    >
                                        {{ v.blockheight }}
                                    </view>
                                </uni-td>
                                <uni-td align="center">
                                    <view class="text-[#4285F4] text-[14px] cursor-pointer" @click="onAddress(v.from)">
                                        {{ crop(v.from, 13) }}
                                    </view>
                                </uni-td>
                                <uni-td align="center">
                                    <view class="text-[#4285F4] text-[14px] cursor-pointer" @click="onAddress(v.to)">
                                        {{ crop(v.to, 13) }}
                                    </view>
                                </uni-td>
                            </uni-tr>
                        </uni-table>
                        <view class="flex justify-end items-center gap-[20px] pt-[20px] pb-[5px] cursor-pointer">
                            <view class="flex items-center gap-[10px]">
                                <view class="text-[#6C757d]">{{ $t("common.page.showRows") }}</view>
                                <view class="w-[60px]">
                                    <uni-data-select
                                        v-model="page.ps"
                                        :localdata="psData"
                                        :clear="false"
                                        placement="top"
                                        @change="onPageSizeChange"
                                    />
                                </view>
                            </view>
                            <view>
                                <uni-pagination
                                    :total="transactionsData.total"
                                    :page-size="page.ps"
                                    :current="page.p"
                                    :showIcon="true"
                                    @change="onPageChange"
                                />
                            </view>
                        </view>
                    </view>
                </uni-group>
            </view>
        </view>
        <!-- footer -->
        <v-footer />
    </view>
</template>
<script setup>
import { reactive } from "vue"
import { onLoad } from "@dcloudio/uni-app"
import { navigateTo, timeAgo, crop } from "@/utils/tools"
import { getTransactionsOverviewData, getTransactionsList } from "@/api/common"
import { useI18n } from "vue-i18n"

const { t } = useI18n()

const transactionsOverviewData = reactive({
    transactions: "",
    transactions_color: "#5A6773",
    transactions_percentage: 0,
    gas: "",
    gas_color: "#5A6773",
    gas_percentage: 0,
    gas_avg: "",
    gas_avg_color: "#5A6773",
    gas_avg_percentage: 0
})
const transactionsData = reactive({
    list: {},
    total: 0,
    start: 0,
    end: 0
})
const page = reactive({
    p: 1,
    ps: 10
})
const psData = [
    { text: "10", value: 10 },
    { text: "25", value: 25 },
    { text: "50", value: 50 }
]

const getTransactionsListFunc = async () => {
    try {
        const { list, total } = await getTransactionsList(page)
        console.log(list, total)
        transactionsData.total = total
        transactionsData.list = list.map((v, i) => {
            return {
                ...v,
                timestamp: timeAgo(v.timestamp),
                from: v.txinfo.vout[0].address,
                to: v.txinfo.vin[0].addr
            }
        })
    } catch (error) {
        console.log(error)
    }
}

const getTransactionsOverviewDataFunc = async () => {
    try {
        const data = await getTransactionsOverviewData()
        for (const key in transactionsOverviewData) {
            if (data[key] != null && data[key] != undefined) {
                transactionsOverviewData[key] = data[key]
            }
        }
        if (transactionsOverviewData.transactions_percentage > 0) {
            transactionsOverviewData.transactions_color = "#FF4D4F"
        } else if (transactionsOverviewData.transactions_percentage < 0) {
            transactionsOverviewData.transactions_color = "#52C41A"
        }
        if (transactionsOverviewData.gas_percentage > 0) {
            transactionsOverviewData.gas_color = "#FF4D4F"
        } else if (transactionsOverviewData.gas_percentage < 0) {
            transactionsOverviewData.gas_color = "#52C41A"
        }
        if (transactionsOverviewData.gas_avg_percentage > 0) {
            transactionsOverviewData.gas_avg_color = "#FF4D4F"
        } else if (transactionsOverviewData.gas_avg_percentage < 0) {
            transactionsOverviewData.gas_avg_color = "#52C41A"
        }
    } catch (error) {
        console.log(error)
    }
}

const onPageSizeChange = async (e) => {
    try {
        uni.showLoading({ title: t("common.loading") })
        await getTransactionsListFunc()
    } catch (error) {
        console.log(error)
    } finally {
        uni.hideLoading()
    }
}

const onPageChange = async (e) => {
    try {
        uni.showLoading({ title: t("common.loading") })
        page.p = e.current
        await getTransactionsListFunc()
    } catch (error) {
        console.log(error)
    } finally {
        uni.hideLoading()
    }
}

const onBlock = (height) => {
    navigateTo(`block?height=${height}`)
}

const onAddress = (address) => {
    navigateTo(`address?address=${address}`)
}

const onTransaction = (tx) => {
    navigateTo(`transaction?tx=${tx}`)
}

onLoad(() => {
    getTransactionsOverviewDataFunc()
    getTransactionsListFunc()
})
</script>
